在 vue router
文件中有提到一些方法,可以讓我們使用
參考資訊
我們先在 menu.vue
內新增兩個 <a>
連結,一個是切換到指定頁面,一個是回到上一頁:
<template>
<div class="hello">
<ul class="nav">
<li class="nav-item">
<router-link class="nav-link" to="/page">卡片1</router-link>
</li>
<li class="nav-item">
<router-link class="nav-link" to="/page/child2">卡片2</router-link>
</li>
<li class="nav-item">
<router-link class="nav-link" to="/page/child3">卡片3</router-link>
</li>
<li class="nav-item">
<a class="nav-link" href="#" @click.prevent="updatePath">切換到指定頁面</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#" @click.prevent="beforePath">回到上一頁</a>
</li>
</ul>
</div>
</template>
接著我們就可以在下面的 export
寫下我們定義的方法,並採用文件提供到的方法:
<script>
export default {
data () {
return {}
},
methods: {
updatePath () {
this.$router.push('/page/child2');
},
beforePath () {
this.$router.back();
}
}
}
</script>
上面的 undatePath
是切換到指定頁面,我們可以採用文件內的 router.push()
這個方法,而 beforePath
是回到上一頁,我們一頁也可以採用文件內的 router.back()
這個方法
文件還有提供很多方法可以做使用,這裡就不多加贅述